<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>资料详情</title>
        <link rel="stylesheet" type="text/css" href="/public/design/css/common.css"/>
        <link rel="stylesheet" type="text/css" href="/public/design/css/niceEdit.css"/>
        <link rel="stylesheet" type="text/css" href="/public/design/css/styles.css"/>
        <link rel="stylesheet" type="text/css" href="/public/design/css/styles.css"/>
        <link rel="stylesheet" type="text/css" href="/public/design/view_post.css"/>


    </head>
    <body>
        <a href="#" name="top"></a>
        <div id="container" class="container">
            #{include '_nav.html'/}

            <div id="bottom">
                <div id="b_left">
                    <div class="zl">
                        <div class="biaoQianKuang">
                            <div class="bq_top">
                                #{list post.tags, as:'tag'}
                                <div class="bq">${tag.name}</div>
                                #{/list}
                            </div>
                        </div>
                        <div class="ziLiaoContent">
                            <div class="zl_top">
                                <div class="userimg">
                                    <a href="geRenZhongXin.html"><img src="/public/design/img/ziLiaoXiangQing/u2047.png"/></a>
                                </div>
                                <div class="author">
                                    <a href="geRenZhongXin.html">张敏 </a>
                                    <span id="shenfen">
                                        平面设计师
                                    </span>
                                </div>
                                <div class="date">
                                    ${post.created_at?.format('yyyy-MM-dd')}
                                </div>
                                <div class="piaofukuang">
                                    <div class="user">
                                        <div class="userimg">
                                            <img src="/public/design/img/searchResult/u2047.png"/>
                                        </div>
                                        <div class="username">
                                            小龙女
                                        </div>
                                        <div class="shenfen">
                                            室内设计师
                                        </div>
                                    </div>
                                    <div class="guanzhuanniu">
                                        关注
                                    </div>

                                    <div class="qianming">
                                        生于斯长于斯，日后老死也必将于此。
                                    </div>
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>话题</td>
                                            <td>资料</td>
                                            <td>关注者</td>
                                            <td rowspan="2">
                                                <a href="#"><img src="/public/design/img/home/u307.png"/></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="count">234</td>
                                            <td class="count">10</td>
                                            <td class="count">123</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="zlc_left">

                                <img src="/public/design/img/ziLiaoXiangQing/u1285.png" class="zan"/>
                                <div class="zanCol">
                                    202
                                </div>
                            </div>

                            <div class="zlc_right">

                                <div class="biaoTi">
                                    <div class="bt_left">
                                        ${post.subject}
                                    </div>
                                    <div class="bt_right">
                                        关注
                                    </div>
                                </div>

                                <article class="content">
                                    #{list post.resources, as:'res'}
                                    <img src="@{Resources.raw(res.hash,'')}"/>
                                    #{/list}
                                    ${post.content.raw()}
                                </article>
                                <!--用户提问-->
                                <div class="question">
                                    <div class="q_top">
                                        <div class="tit">
                                            用户提问
                                        </div>
                                        <div class="btn">
                                            提问
                                        </div>
                                        <div class="tiwen">
                                            <input type="text" id="" value="" class="wen"/>
                                            <input type="button" name="" id="" value="提问" class="anniu"/>
                                            <input type="button" name="" id="" value="取消" class="qv"/>
                                        </div>
                                    </div>
                                    <div class="q_content">
                                        <div class="q_neirong">
                                            <span class="username">
                                                阿朱
                                            </span>的问题：<span class="nr">
                                                吧台使用什么材料?
                                            </span>

                                        </div>
                                        <div class="btn">
                                            回答
                                        </div>

                                        <div class="answers">
                                            <a href="answers.html" target="_blank">2条回答</a>
                                        </div>
                                        <div class="huida">
                                            <input type="text" id="" value="" class="wen"/>
                                            <input type="button" name="" id="" value="回答" class="anniu" />
                                            <input type="button" name="" id="" value="取消" class="qv"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="pingLun">
                                    <ul>
                                        <li class="shou"><span class="count">
                                                100
                                            </span>条评论</li>
                                        <li class="sc"><span class="count">
                                                5
                                            </span>人收藏</li>
                                        <li class="fx"><span class="count">
                                                10
                                            </span>人分享</li>
                                    </ul>
                                    <div class="fx_content">
                                        <div class="s">
                                            <a href="#"><img src="/public/design/img/fabuziliao/wx.png"/></a>
                                            <a href="#"><img src="/public/design/img/fabuziliao/pyq.png"/></a>
                                            <a href="#"><img src="/public/design/img/fabuziliao/qq.png"/></a>
                                            <a href="#"><img src="/public/design/img/fabuziliao/wb.png"/></a>
                                            <div class="qxpl">
                                                取消分享
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="plk">
                        <div class="pl">
                            #{list post.load_replies(), as:'reply'}
                            <div class="ziLiaoContent">
                                <div class="zlc_left">
                                    <img src="/public/design/img/ziLiaoXiangQing/u1285.png" class="zan" />
                                    <div class="zanCol">
                                        202
                                    </div>
                                </div>
                                <div class="zlc_right">
                                    <div class="author">
                                        <img src="/public/design/img/ziLiaoXiangQing/u64.png" />
                                        <div class="name">
                                            张三
                                        </div>
                                        <div class="shenfen">
                                            平面设计师
                                        </div>
                                    </div>
                                    <div class="date">
                                        ${reply.created_at?.format('yyyy-MM-dd')}
                                    </div>

                                    <article class="content">
                                        <aside>
                                            #{list reply.resources, as:'res'}
                                            <img src="@{Resources.raw(res.hash,'')}"/>
                                            #{/list}
                                            ${reply.content}
                                        </aside>
                                    </article>

                                    <div class="pingLun">
                                        <ul>
                                            <li class="shou">2条评论</li>
                                            <li class="sc">5人收藏</li>
                                            <li class="fx">10人分享</li>
                                        </ul>
                                        <div class="fx_content">
                                            <div class="s">
                                                <a href="#"><img src="/public/design/img/fabuziliao/wx.png"/></a>
                                                <a href="#"><img src="/public/design/img/fabuziliao/pyq.png"/></a>
                                                <a href="#"><img src="/public/design/img/fabuziliao/qq.png"/></a>
                                                <a href="#"><img src="/public/design/img/fabuziliao/wb.png"/></a>
                                                <div class="qxpl">
                                                    取消分享
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="pingLunKuang">
                                        <div class="plk_in">
                                            <div class="in_top jianJu">张三 2015-09-10</div>
                                            <div class="in_middle jianJu">XX吉祥物，用于杭州亚运会。本人历经1年时间。XX吉祥物，用于杭州亚运会。</div>
                                            <hr style="color: #e8e8e8;" />
                                            <div class="pl_text">
                                                <input type="text" />
                                            </div>
                                            <div class="btn">
                                                <div class="close">
                                                    取消
                                                </div>
                                                <div class="tiJiao">
                                                    评论
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            #{/list}
                        </div>
                    </div>

                    <div class="more">
                        收起评论
                    </div>

                    <div class="yiJiPingLunKuang">
                        <a href="#" name="pinglun"></a>
                        <form action="@{B.reply}" method="post"  enctype="multipart/form-data" id="reply">
                            <input type="hidden" name="post_id" value="${post.id}"/>
                            <div class="textarea">
                                <textarea name="content" nic="nic" style="width: 600px; height: 250px;border: none;"></textarea>
                            </div>
                            <input type="file" name="files"/>
                            <div class="btn">
                                <button type="submit" class="tiJiao">评论</button>
                            </div>
                        </form>
                    </div>

                    <div class="about">
                        <div class="title">
                            相关资料
                        </div>
                        <div id="showWaterFull">
                            <ul >
                                <li class="box">
                                    <div class="b_pic">
                                        <img src="/public/design/img/ziLiao/u152.png" />
                                    </div>
                                    <div class="b_text">
                                        <div class="tit">现代梦幻酒吧室内设计</div>
                                        <ul class="biaoqian">
                                            <li><a href="#">建筑设计</a></li>
                                            <li><a href="#">室内设计</a></li>
                                            <li><a href="#">商业地产</a></li>
                                        </ul>
                                        <ul class="zanGuanzhu">
                                            <li class="zanImg"><img src="/public/design/img/ziLiao/u11.png"/></li>
                                            <li class="zanCounts">30</li>
                                            <li class="guanzhuImg"><img src="/public/design/img/ziLiao/u13.png"/></li>
                                            <li class="guanzhuCounts">30</li>
                                        </ul>
                                        <div class="jieShao" style="text-overflow: ellipsis;">
                                            上升的建筑，用于杭州亚运会，本人历经1年多时间，经过
                                        </div>
                                    </div>
                                </li>

                                <li class="box">
                                    <div class="b_pic">
                                        <img src="/public/design/img/ziLiao/u155.png" />
                                    </div>
                                    <div class="b_text">
                                        <div class="tit">现代梦幻酒吧室内设计</div>
                                        <ul class="biaoqian">
                                            <li><a href="#">建筑设计</a></li>
                                            <li><a href="#">室内设计</a></li>
                                            <li><a href="#">商业地产</a></li>
                                        </ul>
                                        <ul class="zanGuanzhu">
                                            <li class="zanImg"><img src="/public/design/img/ziLiao/u11.png"/></li>
                                            <li class="zanCounts">30</li>
                                            <li class="guanzhuImg"><img src="/public/design/img/ziLiao/u13.png"/></li>
                                            <li class="guanzhuCounts">30</li>
                                        </ul>
                                        <div class="jieShao" style="text-overflow: ellipsis;">
                                            上升的建筑，用于杭州亚运会，本人历经1年多时间，经过
                                        </div>
                                    </div>
                                </li>

                                <li class="box">
                                    <div class="b_pic">
                                        <img src="/public/design/img/ziLiao/u174.png" />
                                    </div>
                                    <div class="b_text">
                                        <div class="tit">现代梦幻酒吧室内设计</div>
                                        <ul class="biaoqian">
                                            <li><a href="#">建筑设计</a></li>

                                            <li><a href="#">室内设计</a></li>

                                            <li><a href="#">商业地产</a></li>
                                        </ul>
                                        <ul class="zanGuanzhu">
                                            <li class="zanImg"><img src="/public/design/img/ziLiao/u11.png"/></li>
                                            <li class="zanCounts">30</li>
                                            <li class="guanzhuImg"><img src="/public/design/img/ziLiao/u13.png"/></li>
                                            <li class="guanzhuCounts">30</li>
                                        </ul>
                                        <div class="jieShao" style="text-overflow: ellipsis;">
                                            上升的建筑，用于杭州亚运会，本人历经1年多时间，经过
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>	
                    </div>

                    <div id="endingLine">
                        <img src="/public/design/img/ziLiao/bottomLogo.png"/>
                    </div>

                    <!--底部评论条-->
                    <div id="diBuPingLun">
                        <div class="top">
                            <div class="s">
                                <a href="#"><img src="/public/design/img/fabuziliao/wx.png"/></a>
                                <a href="#"><img src="/public/design/img/fabuziliao/pyq.png"/></a>
                                <a href="#"><img src="/public/design/img/fabuziliao/qq.png"/></a>
                                <a href="#"><img src="/public/design/img/fabuziliao/wb.png"/></a>
                            </div>
                            <div class="x">
                                <div class="qxpl">
                                    取消评论
                                </div>
                            </div>
                        </div>
                        <div class="botton">
                            <div class="left">
                                <ul>
                                    <li class="dpl"><a href="#pinglun"><span class="count">200</span>条评论</a></li>
                                    <li class="ddz"><span class="count">101</span>人点赞</li>
                                    <li class="dsc"><span class="count">90</span>人收藏</li>
                                    <li class="dfx"><span class="count">10</span>人分享</li>
                                    <li class="jb">举报</li>
                                </ul>

                            </div>
                            <div class="right">
                                <a href="#top"><img src="/public/design/img/fabuziliao/xiangshang.png"/></a>
                                <a href="#db"><img src="/public/design/img/fabuziliao/xiangxia.png"/></a>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="b_right" class="br">
                    <div class="b_r_top">
                        <div class="title">资料图索引</div>
                        <div class="imgs">
                            <div class="showImgs">
                                <ul>
                                    <li class="box"><img src="/public/design/img/ziLiaoXiangQing/u768.png"/></li>
                                    <li class="box"><img src="/public/design/img/ziLiaoXiangQing/u773.png"/></li>
                                    <li class="box"><img src="/public/design/img/dongTai/u32.png"/></li>
                                </ul>
                            </div>
                        </div>	
                    </div>
                    <div class="b_r_bottom">
                        <div class="title">
                            小龙女发布的其他资料
                        </div>
                        <div class="zls">

                            <div class="showImgs">
                                <ul>
                                    <li class="box">
                                        <a href="ziLiaoXiangQing.html">
                                            <div class="b_pic">
                                                <img src="/public/design/img/home/u46.jpg" />
                                            </div>
                                            <div class="b_text">
                                                <div class="tit">
                                                    现代梦幻酒吧室内设计
                                                </div>

                                                <ul class="zanGuanzhu">
                                                    <li class="zanImg"><img src="/public/design/img/home/tab_like.png" /></li>
                                                    <li class="zanCounts">30</li>
                                                    <li class="guanzhuImg"><img src="/public/design/img/home/tab_collect.png" /></li>
                                                    <li class="guanzhuCounts">30</li>
                                                </ul>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="box">
                                        <a href="ziLiaoXiangQing.html">
                                            <div class="b_pic">
                                                <img src="/public/design/img/home/u210.png" />
                                            </div>
                                            <div class="b_text">
                                                <div class="tit">
                                                    现代梦幻酒吧室内设计
                                                </div>

                                                <ul class="zanGuanzhu">
                                                    <li class="zanImg"><img src="/public/design/img/home/tab_like.png" /></li>
                                                    <li class="zanCounts">30</li>
                                                    <li class="guanzhuImg"><img src="/public/design/img/home/tab_collect.png" /></li>
                                                    <li class="guanzhuCounts">30</li>
                                                </ul>

                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                #{include '_footer.html'/}

            </div>

        </div>
        <a href="#" name="db"></a>

        <script src="/public/design/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/javascripts/nicEdit.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/design/js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/design/js/jquery.masonry.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/design/js/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="/public/javascripts/jquery.form.min.js" ></script>
        <script type="text/javascript" src="/public/javascripts/xjp.js" ></script>
        <script src="/public/design/js/jquery.pin.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                
                 $('#reply').ajaxForm({
                    beforeSerialize: function () {
                        var cnt = $("textarea[nic=nic]").parent();
                        var html = cnt.find('.nicEdit-main').html();
                        $("textarea[nic=nic]").html(html);
                    }
                });
                
                bkLib.onDomLoaded(function () {
                    nicEditors.allTextAreas();
                });

                $(window).resize(function () {
                    location.reload(true);
                });
                $("#upDpwn").click(function () {
                    if ($(".biaoQianKuang .bq_bottom").css("display") == "none") {
                        $("#upDpwn").prop("src", "/public/design/img/ziLiaoXiangQing/u805.png");
                        $(".biaoQianKuang .bq_bottom").show();
                    } else {
                        $("#upDpwn").prop("src", "/public/design/img/ziLiaoXiangQing/u237.png");
                        $(".biaoQianKuang .bq_bottom").hide();
                    }

                });
                //实现瀑布流插件
                var $container = $('#showWaterFull');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        itemSelector: '.box',
                        columnWidth: 12 //每两列之间的间隙为5像素
                    });
                });

                var $container = $('.showImgs');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        itemSelector: '.box',
                        columnWidth: 12 //每两列之间的间隙为5像素
                    });
                });

                $(".pingLunKuang .btn .close").click(function () {
                    $(".pingLunKuang").hide();
                    $(".pingLun .shou").text("2条评论")

                })

                $(".pl .pingLun .shou").click(function () {
                    $(".pingLunKuang").show();
                    $(".pl .pingLun .shou").text("收起评论")
                })

                $(".more").click(function () {
                    if ($(".plk").is(":hidden")) {
                        $(".plk").show();
                        $(this).text("收起评论");
                        $(".zl .pingLun .shou").text("收起评论");
                    } else {
                        $(".plk").hide();
                        $(this).text("展开评论");
                    }
                });

                $(".zl .pingLun .shou").click(function () {
                    if (!$(".plk").is(":hidden")) {
                        $(".plk").hide();
                        $(".zl .pingLun .shou").text("100条评论");
                        $(".more").text("展开评论");
                    }
                });

                /*固定在屏幕位置*/

                $(window).scroll(function () {
                    var scrollTop = $(this).scrollTop();
                    var scrollHeight = $(document).height();
                    var windowHeight = $(this).height();
                    if (scrollTop + windowHeight == scrollHeight) {
                        $("#b_right").css({"position": "absolute", "top": "100px"});
                        $("#diBuPingLun").hide();
                    } else if (scrollTop >= 100) {
                        $("#b_right").css({"position": "fixed", "top": "0px"});
                        $("#diBuPingLun").css({"position": "fixed", "bottom": "0px"});
                        $("#diBuPingLun").show();
                    } else {
                        $("#b_right").css({"position": "absolute", "top": "100px"});
                        $("#diBuPingLun").css({"position": "absolute", "bottom": "0px"});
                        $("#diBuPingLun").hide();
                    }
                });
                var i1 = 0;
                var i2 = 0;
                var i3 = 0;
                var c1 = 0;
                var c2 = 0;
                var c3 = 0;

                /*底部动态条效果*/
                $("#diBuPingLun  .ddz").click(function () {
                    c1 = $(".ddz .count").text();
                    if (i1 == 0) {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/dz2.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        i1 = 1;
                        c1++;
                    } else {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/dz.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        i1 = 0;
                        c1--;
                    }
                    $(".ddz .count").text(c1);

                })
                $("#diBuPingLun .dsc").click(function () {
                    c2 = $(".dsc .count").text();
                    if (i2 == 0) {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/sc2.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        i2 = 1;
                        c2++;
                    } else {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/sc.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        i2 = 0;
                        c2--;
                    }
                    $(".dsc .count").text(c2);

                });

                $("#diBuPingLun .dfx").click(function () {
                    c3 = $(".dfx .count").text();
                    if (i3 == 0) {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/fx2.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        $("#diBuPingLun .top").show();
                        i3 = 1;
                        c3++;
                    } else {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/fx.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                        i3 = 0;
                        c3--;
                    }
                    $(".dfx .count").text(c3);

                })
                $("#diBuPingLun .qxpl").click(function () {
                    var c4 = $(".dfx .count").text();
                    $("#diBuPingLun .top").hide();
                    $("#diBuPingLun .dfx").css({"background-image": "url(/public/design/img/fabuziliao/fx.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "15px", "background-position-y": "10px"})
                    c4--;
                    $(".dfx .count").text(c4);
                });
                $(".userinfo").hover(function () {
                    $(".info").slideDown("fast");
                }, function () {
                    $(".info").slideUp("10");
                });

                var index = 0;
                $("#b_left").find(".sc").click(function () {
                    varcount = $(".sc .count").text();
                    if (index == 0) {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/sc2.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "0px", "background-position-y": "0px"})
                        index = 1;
                        count++;
                    } else {
                        $(this).css({"background-image": "url(/public/design/img/fabuziliao/sc.png)", "background-size": "20px 20px", "background-repeat": "no-repeat", "background-position-x": "0px", "background-position-y": "0px"})
                        index = 0;
                        count--;
                    }
                });

                //及时搜索
                var countries = [
                    {value: '分类:室内', data: '室内'},
                    {value: '室内设计', data: ''},
                    {value: '室内装修', data: '室内'},
                    {value: '室内环保', data: '室内'},
                    {value: '室内设计', data: '室内'},
                    {value: '室内设计', data: '室内'},
                    {value: '话题:室内', data: '室内'},
                    {value: '某宾馆室内设计', data: '室内'},
                    {value: '某大厦室内设计', data: '室内'},
                    {value: '资料:室内', data: '室内'},
                    {value: '某宾馆室内设计', data: '室内'},
                    {value: '某大厦室内设计', data: '室内'},
                    {value: '某宾馆室内设计', data: '室内'},
                    {value: '某大厦室内设计', data: '室内'},
                    {value: '更多室内相关资料...', data: '室内'},
                    // ...
                    {value: 'Zimbabwe', data: 'ZZ'}
                ];

                $('#autocomplete').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        /*  window.open("souSuojieguo.html");*/
                    },
                    autoFill: true,
                });

                $(".bt_right").click(function () {
                    if ($(this).text().trim() == "关注") {
                        $(this).text("取消关注");
                    } else {
                        $(this).text("关注");
                    }
                });
                $(".guanzhuanniu").click(function () {
                    if ($(this).text().trim() === "关注") {
                        $(this).text("取消关注");
                    } else {
                        $(this).text("关注");
                    }
                });

                $(".question .q_top .btn").click(function () {
                    $(this).next().slideToggle();
                });
                $(".question .q_content .btn").click(function () {
                    $(this).nextAll(".huida").slideToggle();
                });
                $(".question .qv").click(function () {
                    $(this).parent().slideUp();
                });

                $(".zl_top").not(".date").hover(function () {
                    $(".piaofukuang").slideDown("slowly");
                }, function () {
                    $(".piaofukuang").slideUp("slowly");
                });
            });
        </script>
    </body>
</html>
